<template>
	<view class="page">
		<view class="head">
			<view class="job-enterprise-auth-navbar">
				<view class="job-enterprise-auth-navbar-back" @click="$back"><u-icon name="arrow-left" color="#ffffff" label="返回" labelSize="26rpx" labelColor="#ffffff"></u-icon></view>
				<view class="job-enterprise-auth-navbar-advantage" @click="oberlayShow = true">优势认证</view>
			</view>
			<view class="job-enterprise-auth-avatar">
				<view class="job-enterprise-auth-avatar-contnet">
					<!-- <u-upload :fileList="fileList6" @afterRead="afterRead" @delete="deletePic" name="6" multiple :maxCount="1" width="110" height="110">
						<u--image src="/static/job/name_qy.jpg" mode="widthFix" width="110rpx" height="110rpx" shape="circle"></u--image>
					</u-upload> -->
					<u-avatar :src="companyInfo.companyAvatarUrl " shape="circle" size="110rpx"></u-avatar>
					<view class="job-enterprise-auth-text"><text>企业认证</text></view>
				</view>
			</view>
		</view>
		<view class="body">
			<view class="job-enterprise-form">
				<view class="job-enterprise-form-item">
					<view class="job-enterprise-from-item-title">
						企业名称
						<text>*</text>
					</view>
					<view class="job-enterprise-from-item-input">
						<u--input
							v-model="companyInfo.companyName"
							placeholder="请输入企业名称"
							border="none"
							@blur="checkTextContent()"
							fontSize="28rpx"
							color="#000000"
							placeholderStyle="color:#999999"
						></u--input>
					</view>
				</view>
				<u-gap height="2" bgColor="#f5f5f5"></u-gap>

				<view class="job-enterprise-form-item">
					<view class="job-enterprise-from-item-title">
						企业性质
						<text>*</text>
					</view>
					<view class="job-enterprise-from-item-input">
						<view style="width: 100%;">
							<select-lay
								:zindex="1211"
								:value="companyInfo.companyNature"
								name="nature"
								placeholder="请选择"
								:options="natureList"
								@selectitem="natureSelectitem()"
							></select-lay>
						</view>
					</view>
				</view>
				<u-gap height="2" bgColor="#f5f5f5"></u-gap>

				<view class="job-enterprise-form-item">
					<view class="job-enterprise-from-item-title">
						所属行业
						<text>*</text>
					</view>
					<view class="job-enterprise-from-item-input">
						<view style="width: 100%;">
							<select-lay
								:zindex="1210"
								:value="companyInfo.companyIndustry"
								name="nature"
								placeholder="请选择"
								:options="industryList"
								@selectitem="industrySelectitem()"
							></select-lay>
						</view>
					</view>
				</view>
				<u-gap height="2" bgColor="#f5f5f5"></u-gap>

				<view class="job-enterprise-form-item">
					<view class="job-enterprise-from-item-title">
						企业规模
						<text>*</text>
					</view>
					<view class="job-enterprise-from-item-input">
						<view style="width: 100%;">
							<select-lay
								:zindex="1209"
								:value="companyInfo.companyScale"
								name="nature"
								placeholder="请选择"
								:options="scaleList"
								@selectitem="scaleSelectitem()"
							></select-lay>
						</view>
					</view>
				</view>
				<u-gap height="2" bgColor="#f5f5f5"></u-gap>

				<view class="job-enterprise-form-item">
					<view class="job-enterprise-from-item-title">
						联系人
						<text>*</text>
					</view>
					<view class="job-enterprise-from-item-input">
						<u--input v-model="companyInfo.companyContacts" placeholder="请输入联系人" border="none" placeholderStyle="color:#999999" @blur="checkTextContent"></u--input>
					</view>
				</view>
				<u-gap height="2" bgColor="#f5f5f5"></u-gap>

				<view class="job-enterprise-form-item">
					<view class="job-enterprise-from-item-title">
						联系电话
						<text>*</text>
					</view>
					<view class="job-enterprise-from-item-input">
						<u--input
							v-model="companyInfo.companyContactNumber"
							placeholder="请输入联系电话（不公开）"
							border="none"
							type="number"
							placeholderStyle="color:#999999"
							@blur="checkTextContent"
						></u--input>
					</view>
				</view>
				<u-gap height="2" bgColor="#f5f5f5"></u-gap>

				<view class="job-enterprise-form-item">
					<view class="job-enterprise-from-item-title">
						联系电话
						<text>*</text>
						<view>（公开）</view>
					</view>
					<view class="job-enterprise-from-item-input">
						<u--input
							v-model="companyInfo.companyTelepPhoe"
							placeholder="请输入联系电话（公开）"
							border="none"
							type="number"
							placeholderStyle="color:#999999"
							@blur="checkTextContent"
						></u--input>
					</view>
				</view>
				<u-gap height="2" bgColor="#f5f5f5"></u-gap>

				<view class="job-enterprise-form-item-column">
					<view class="job-enterprise-form-item-column-title">
						公司地址
						<text>*</text>
					</view>
					<view class="job-enterprise-form-item-column-input">
						<u--textarea v-model="companyInfo.companyAddress" placeholder="公司地址" border="none" height="160rpx" placeholderStyle="color#999999" @blur="checkTextContent"></u--textarea>
					</view>
				</view>
				<u-gap height="2" bgColor="#f5f5f5"></u-gap>

				<view class="job-enterprise-form-item-column">
					<view class="job-enterprise-form-item-column-title">
						企业介绍
						<text>*</text>
					</view>
					<view class="job-enterprise-form-item-column-input">
						<u--textarea v-model="companyInfo.companyIntroduction" placeholder="企业介绍" border="none" placeholderStyle="color#999999" @blur="checkTextContent"></u--textarea>
					</view>
				</view>
				<u-gap height="2" bgColor="#f5f5f5"></u-gap>

				<view class="job-enterprise-form-item-column">
					<view class="job-enterprise-form-item-column-title">
						企业LOGO
						<text>*</text>
					</view>
					<view class="job-enterprise-form-item-column-upload">
						<uni-file-picker
							limit="1"
							disable-preview
							v-model="companyInfo.companyLogoUrl"
							fileMediatype="image"
							mode="grid"
							:imageStyles="imageStyles"
							:listStyles="listStyles"
							ref="companyLogoUrl"
							@select="companyLogoUrlSelect()"
							@delete="companyLogoUrlDelete()"
						></uni-file-picker>
					</view>
				</view>
				<u-gap height="2" bgColor="#f5f5f5"></u-gap>

				<view class="job-enterprise-form-item-column">
					<view class="job-enterprise-form-item-column-title">
						营业执照
						<text>*</text>
					</view>
					<view class="job-enterprise-form-item-column-upload">
						<uni-file-picker
							limit="1"
							v-model="companyInfo.companyBusinessLicenseUrl"
							fileMediatype="image"
							mode="grid"
							:imageStyles="imageStyles"
							:listStyles="listStyles"
							ref="companyBusinessLicenseUrl"
							@select="companyBusinessLicenseUrlSelect"
							@delete="companyBusinessLicenseUrlDelete"
						></uni-file-picker>
					</view>
				</view>
				<u-gap height="2" bgColor="#f5f5f5"></u-gap>

				<view class="job-enterprise-form-item-column">
					<view class="job-enterprise-form-item-column-title">
						企业图片
						<text>*</text>
					</view>
					<view class="job-enterprise-form-item-column-upload">
						<uni-file-picker
							limit="9"
							v-model="companyInfo.companyImageList"
							fileMediatype="image"
							mode="grid"
							:imageStyles="imageStyles"
							:listStyles="listStyles"
							ref="companyImageList"
							@select="companyImageListSelect"
							@delete="companyImageListDelete"
						></uni-file-picker>
					</view>
				</view>
				<u-gap height="2" bgColor="#f5f5f5"></u-gap>

				<view class="job-enterprise-form-submit" @click="infoSubmit()"><view class="job-enterprise-form-submit-button">确认提交</view></view>
			</view>
		</view>
		<view class="bottom u-safe-bottom u-safe-area-inset-bottom"></view>
		<u-overlay :show="oberlayShow" @click="oberlayShow = false">
				<view class="oberlay-warp">
					
					<view class="oberlay-rect "><u-parse :content="advantage"></u-parse></view>
				</view>
			</u-overlay>
			
		<!-- 全局message组件 -->
		<QuickMessage ref="message"></QuickMessage>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
import QuickMessage from '@/components/quick-message/quick-message.vue';
import htzImageUpload from '@/components/htz-image-upload/htz-image-upload.vue';

export default {
	data() {
		return {
			
			imageStyles: {
				width: '33%',
				height: '220rpx',
				border: {
					color: '#d9d9d9',
					width: '2rpx',
					style: 'dashed',
					radius: '5%'
				}
			},
			companyInfo: {
				companyAvatarUrl: uni.getStorageSync('globaUserInfo').avatarUrl, // 企业头像
				companyName: '', // 企业名称
				companyNature: '', // 企业性质
				companyIndustry: '', // 企业行业
				companyScale: '', //  企业规模
				companyContacts: '', // 企业联系人
				companyContactNumber: '', // 企业联系人电话
				companyTelepPhoe: '', // 企业电话
				companyAddress: '', // 企业地址
				companyIntroduction: '', // 企业介绍
				companyLogoUrl: [], // 企业LOGO地址
				companyBusinessLicenseUrl: [], // 企业营业执照地址
				companyImageList: [] // 企业图片
			},
			oberlayShow: false,	// 认证优势是否显示 
			advantage: '',	// 认证优势
			natureList: [], // 企业性质列表
			industryList: [], // 企业所属行业
			scaleList: [], // 企业规模
			isSubmit: true, // 是否可以提交信息
			infoParams: { openid: getApp().globalData.openid, cid: getApp().globalData.cityId }, // 传递参数组合对象
			// tempLogoList: [], // logo上传时临时图片路径
			// tempBusinessLicenseList: [], //
			// tempImageList: [] // 上传企业图片临时列表
		};
	},
	onLoad() {
		this.pageInit();
	},
	methods: {
		pageInit() {
			this.getJobCompanyAuthentication();
		},

		getJobCompanyAuthentication() {
			this.$api.getJobCompanyAuthentication({ openid: getApp().globalData.openid }).then(res => {
				// console.log(res.data);
				// 认证优势
				this.advantage = res.data.Youshi
				// 头像
				this.companyInfo.companyAvatarUrl = this.$getImgUrl(res.data.TxImg)
				// 企业性质
				this.natureList = [];
				for (let natureItem of res.data.XZList) {
					this.natureList.push({ label: natureItem.Name, value: natureItem.ID });
				}
				// 企业行业
				this.industryList = [];
				for (let industryItem of res.data.HYList) {
					this.industryList.push({ label: industryItem.Name, value: industryItem.ID });
				}
				// 企业规模
				this.scaleList = [];
				for (let scaleItem of res.data.GMList) {
					this.scaleList.push({ label: scaleItem.Name, value: scaleItem.ID });
				}
				// console.log(this.industryList);
				
				// 赋值其他数据
				this.companyInfo.companyName = res.data.QYName	// 企业名称
				this.companyInfo.companyNature = res.data.QYXZID	// 企业性质ID
				this.companyInfo.companyIndustry = res.data.QYHYID	// 企业行业ID
				this.companyInfo.companyScale = res.data.QYGMID	//  企业规模ID
				this.companyInfo.companyContacts = res.data.LXPerson	// 企业联系人
				this.companyInfo.companyContactNumber = res.data.LXPhone	// 企业联系人电话
				this.companyInfo.companyTelepPhoe = res.data.LXTel	// 企业电话
				this.companyInfo.companyAddress = res.data.Address	// 企业地址
				this.companyInfo.companyIntroduction = res.data.Content	// 企业介绍
				
				
				this.companyInfo.companyLogoUrl.push({
									name: res.data.Logo.slice(res.data.Logo.lastIndexOf('/') + 1),
									extname: res.data.Logo.slice(res.data.Logo.length - 3),
									url: this.$getImgUrl(res.data.Logo),
						}) // 企业LOGO地址
				// console.log(this.companyInfo.companyLogoUrl)
				this.companyInfo.companyBusinessLicenseUrl.push({
									name: res.data.QYZhiZhao.slice(res.data.QYZhiZhao.lastIndexOf('/') + 1),
									extname: res.data.QYZhiZhao.slice(res.data.QYZhiZhao.length - 3),
									url: this.$getImgUrl(res.data.QYZhiZhao),
						})	// 企业营业执照地址
				// console.log(this.companyInfo.companyBusinessLicenseUrl)
				for(let imageItem of res.data.QYPic) {
					this.companyInfo.companyImageList.push({
									name: imageItem.slice(imageItem.lastIndexOf('/') + 1),
									extname: imageItem.slice(imageItem.length - 3),
									url: this.$getImgUrl(imageItem),
						})	// 企业图片
				}
				// console.log(this.companyInfo.companyImageList)
				
				
				
			});
		},
		//  选择企业性质
		natureSelectitem(index, item) {
			if (index >= 0) {
				this.companyInfo.companyNature = item.value;
				// this.natureVal = item.value
			} else {
				this.companyInfo.companyNature = '';
				// this.natureVal = ""
			}
		},
		// 选择企业行业
		industrySelectitem(index, item) {
			if (index >= 0) {
				this.companyInfo.companyIndustry = item.value;
			} else {
				this.companyInfo.companyIndustry = '';
			}
		},
		// 选择企业规模
		scaleSelectitem(index, item) {
			console.log(item);
			if (index >= 0) {
				this.companyInfo.companyScale = item.value;
			} else {
				this.companyInfo.companyScale = '';
			}
		},
		
		// 企业LOGO管理
		companyLogoUrlSelect(e) {
			// 审核选择图片
			this.checkImgReview(e.tempFilePaths[0]).then(res => {
				if (!res) {
					this.showMessage('error', '图片违规，自动删除', 'center');
					this.$refs.companyLogoUrl.clearFiles(-1);
				} else {
					this.uploadCompanyPicture(e.tempFilePaths[0]).then(res => {
						this.companyInfo.companyLogoUrl.push(...[{
									name: res.Pic,
									extname: e.tempFiles[0].extname,
									url: this.$getImgUrl(res.Imgpath),
						}])
					})
					console.log('companyLogoUrl：', this.companyInfo.companyLogoUrl)
				}
			});
		},
		companyLogoUrlDelete(e) {
			let index = this.companyInfo.companyLogoUrl.findIndex(item => item.url == e.tempFilePath);
			this.companyInfo.companyLogoUrl.splice(index, 1);
			// console.log(this.companyInfo.ref="companyLogoUrl");
		},
		
		// 企业营业执照管理
		companyBusinessLicenseUrlSelect(e) {
			// 审核选择图片
			this.checkImgReview(e.tempFilePaths[0]).then(res => {
				if (!res) {
					this.showMessage('error', '图片违规，自动删除', 'center');
					this.$refs.companyBusinessLicenseUrl.clearFiles(-1);
				} else {
					this.uploadCompanyPicture(e.tempFilePaths[0]).then(res => {
						this.companyInfo.companyBusinessLicenseUrl.push(...[{
									name: res.Pic,
									extname: e.tempFiles[0].extname,
									url: this.$getImgUrl(res.Imgpath),
						}])
					})
					console.log('companyBusinessLicenseUrl:', this.companyInfo.companyBusinessLicenseUrl)
				}
			});
		},
		companyBusinessLicenseUrlDelete(e) {
			let index = this.companyInfo.companyBusinessLicenseUrl.findIndex(item => item.url == e.tempFilePath);
			this.companyInfo.companyBusinessLicenseUrl.splice(index, 1);
			// console.log(this.companyInfo.companyImageList);
		},
		
		// 企业图片管理
		companyImageListSelect(e) {
			// 审核选择图片
			this.checkImgReview(e.tempFilePaths[0]).then(res => {
				if (!res) {
					this.showMessage('error', '图片违规，自动删除', 'center');
					this.$refs.companyImageList.clearFiles(-1);
				} else {
					this.uploadCompanyPicture(e.tempFilePaths[0]).then(res => {
						this.companyInfo.companyImageList.push(...[{
									name: res.Pic,
									extname: e.tempFiles[0].extname,
									url: this.$getImgUrl(res.Imgpath),
						}])
					})
					console.log('companyImageList:', this.companyInfo.companyImageList)
				}
			});
		},
		companyImageListDelete(e) {
			let index = this.companyInfo.companyImageList.findIndex(item => item.url == e.tempFilePath);
			this.companyInfo.companyImageList.splice(index, 1);
			// console.log(this.companyInfo.companyImageList);
		},

		// 上传图片进行审核
		checkImgReview(tempFilePath) {
			// console.log(tempFilePath[0])
			uni.showLoading({
				title: '上传中'
			});
			return this.$api
				.uploadPictureReview({
					params: {} /* 会加在url上 */,
					// #ifdef APP-PLUS || H5
					// files: [], // 需要上传的文件列表。使用 files 时，filePath 和 name 不生效。App、H5（ 2.6.15+）
					// #endif

					// #ifdef MP-ALIPAY
					fileType: 'image/video/audio', // 仅支付宝小程序，且必填。
					// #endif

					filePath: tempFilePath, // 要上传文件资源的路径。
					name: 'file_img', // 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容

					// #ifdef H5 || APP-PLUS
					timeout: 3000 // H5(HBuilderX 2.9.9+)、APP(HBuilderX 2.9.9+)
					// #endif
				})
				.then(res => {
					uni.hideLoading();
					if (res.errcode == 0) {
						return true;
					} else {
						return false;
					}
				});
		},
		// 上传图片
		uploadCompanyPicture(tempFilePath) {
			return this.$api.uploadCompanyAuthenticationPicture({
				params: {} /* 会加在url上 */,
				// #ifdef APP-PLUS || H5
				// files: [], // 需要上传的文件列表。使用 files 时，filePath 和 name 不生效。App、H5（ 2.6.15+）
				// #endif

				// #ifdef MP-ALIPAY
				fileType: 'image/video/audio', // 仅支付宝小程序，且必填。
				// #endif

				filePath: tempFilePath, // 要上传文件资源的路径。
				name: 'imgurl', // 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
				// #ifdef H5 || APP-PLUS
				timeout: 3000 // H5(HBuilderX 2.9.9+)、APP(HBuilderX 2.9.9+)
				// #endif

				// header: {}, /* 会与全局header合并，如有同名属性，局部覆盖全局 */
				// custom: {}, // 自定义参数
				// formData: {xxid:infoId}, // HTTP 请求中其他额外的 form data
				// // 返回当前请求的task, options。请勿在此处修改options。非必填
				// getTask: (task, options) => {
				//   // setTimeout(() => {
				//   //   task.abort()
				//   // }, 500)
				// }
			})
				.then(res => {
					uni.hideLoading();
					// console.log(res);
					return res.data
					// resolve(res);
				})
				// .catch(err => {
				// 	uni.hideLoading();
				// 	console.log(err);
				// 	reject(err);
				// });
		},
		// 文字审核
		checkTextContent(value) {
					// console.log(value)
					if (value.length > 0) {
						this.$api.checkTextContent({ filewz: value }).then(res => {
							if (res.errcode != 0) {
								this.showMessage('error', '文字内容违规，请修改文字内容', 'center');
							}
						});
					}
				},
		infoSubmit() {
			this.isSubmit = true;

			// 判断企业名称是输入为空
			if (this.companyInfo.companyName == '') {
				this.showMessage('warning', '请填写企业名称', 'center');
				this.isSubmit = false;
				return;
			} else {
				// 组合企业名称参数
				this.infoParams['QYName'] = this.companyInfo.companyName;
			}

			// 判断企业性质是否选择
			if (this.companyInfo.companyNature == '') {
				this.showMessage('warning', '请选择企业性质', 'center');
				this.isSubmit = false;
				return;
			} else {
				// 组合企业性质参数
				this.infoParams['XZID'] = this.companyInfo.companyNature;
			}

			// 判断所属行业是否选择
			if (this.companyInfo.companyIndustry == '') {
				this.showMessage('warning', '请选择所属行业', 'center');
				this.isSubmit = false;
				return;
			} else {
				// 组合所属行业参数
				this.infoParams['HYID'] = this.companyInfo.companyIndustry;
			}

			// 判断企业规模是否选择
			if (this.companyInfo.companyScale == '') {
				this.showMessage('warning', '请选择企业规模', 'center');
				this.isSubmit = false;
				return;
			} else {
				// 组合企业规模参数
				this.infoParams['GMID'] = this.companyInfo.companyScale;
			}
			
			// 判断联系人是否为空
			if (this.companyInfo.companyContacts == '') {
				this.showMessage('warning', '请填写联系人', 'center');
				this.isSubmit = false;
				return;
			} else {
				// 组合联系人参数
				this.infoParams['LXPerson'] = this.companyInfo.companyContacts;
			}
			
			// 判断联系电话是否为空
			if (this.companyInfo.companyContactNumber == '') {
				this.showMessage('warning', '请填写联系人电话', 'center');
				this.isSubmit = false;
				return;
			} else {
				// 组合联系电话参数
				this.infoParams['LXPhone'] = this.companyInfo.companyContactNumber;
			}
			
			// 判断公司电话是否为空
			if (this.companyInfo.companyTelepPhoe == '') {
				this.showMessage('warning', '请填写企业电话', 'center');
				this.isSubmit = false;
				return;
			} else {
				// 组合公司电话参数
				this.infoParams['LXTel'] = this.companyInfo.companyTelepPhoe;
			}

			// 判断公司地址是否为空
			if (this.companyInfo.companyAddress == '') {
				this.showMessage('warning', '请填写公司地址', 'center');
				this.isSubmit = false;
				return;
			} else {
				// 组合公司地址参数
				this.infoParams['Address'] = this.companyInfo.companyAddress;
			}

			// 判断公司介绍是否为空
			if (this.companyInfo.companyIntroduction == '') {
				this.showMessage('warning', '请填写企业介绍', 'center');
				this.isSubmit = false;
				return;
			} else {
				// 组合公司介绍参数
				this.infoParams['Content'] = this.companyInfo.companyIntroduction;
			}
			
			// 判断是否上传企业LOGO
			if(this.companyInfo.companyLogoUrl.length == 0) {
				this.showMessage('warning', '请上传企业LOGO', 'center');
				this.isSubmit = false;
				return
			} else {
				// 组合企业LOGO参数
				this.infoParams['logoimg'] = this.companyInfo.companyLogoUrl[0].name
			}
			
			// 判断是否上传企业营业执照
			if(this.companyInfo.companyBusinessLicenseUrl.length == 0) {
				this.showMessage('warning', '请上传企业LOGO', 'center');
				this.isSubmit = false;
				return
			} else {
				// 组合企业营业执照参数
				this.infoParams['zzimg'] = this.companyInfo.companyBusinessLicenseUrl[0].name
			}
			
			// 判断是否上传企业图片
			if(this.companyInfo.companyImageList.length == 0) {
				this.showMessage('warning', '请上传企业图片', 'center');
				this.isSubmit = false;
				return
			} else {
				// 组合企业图片参数
				let tempImageItem = ''
				for(let imageItem of  this.companyInfo.companyImageList) {
					tempImageItem = tempImageItem +  imageItem.name + ','
				}				
				this.infoParams['qyimg'] = tempImageItem.slice(0, tempImageItem.length - 1)
			}
			// console.log(this.infoParams);
			
			if(this.isSubmit) {
				this.$api.postJobComapnyAuthentication(this.infoParams).then(res => {
					uni.$u.route('/pages/jobMe/jobMe')
				})
			}
			
		},
		showMessage(type, title, direction) {
			//显示message
			this.$refs.message.show({
				type: type, //默认default
				msg: title, //显示内容
				icon: true, //显示icon
				mask: false, //遮罩
				time: 3000, //显示时间
				direction: direction //方向
			});
			let id = this.$refs.message.id; //获取弹窗id,需要在弹出后获取
			setTimeout(() => {
				this.$refs.message.close(id); //关闭某个弹窗
			}, 3000);
			// if(this.messageData.time===false){
			// 	if(this.messageData.mask){
			// 		this.$refs.message.show({
			// 			type:'warning',
			// 			msg:'注意!! 当前遮罩已开启,不可点击,为了方便测试这里设置了10秒后关闭当前消息,你也可以关闭指定某个消息,详情查看说明文档及demo.',
			// 			time:10000
			// 		})
			// 		setTimeout(()=>{
			// 			this.$refs.message.close(id); //关闭某个弹窗
			// 		},10000)
			// 	}
			// }
		}
	},
	components: {
		htzImageUpload,
		QuickMessage
	}
};
</script>

<style lang="scss" scoped>
@import url('jobMyEnterPriseAuth.css');
</style>
